<template>
    <div>
        <div>
            <table border="1" class="table-box">
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>爱好</th>
                        <th>电话</th>
                        <th>班级</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  v-for="(item,index) in list" :key="index">
                        <td><input type="checkbox"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                        <td>{{JSON.parse(item.hobbies).join(' ')}}</td>
                        <td>{{item.tel}}</td>
                        <td>{{item.grade}}</td>
                        <td>
                            <button @click="lookClick(index)">查看</button>
                            <button @click="updataClick(item.id,index)">修改</button>
                            <button @click="delClick(item.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <DelModal v-show="delModalShow"  @modalHides="delModalHide" :delId="delId" :getData="getData"></DelModal>
        <UpdateModal v-show="upModalShow" @modalHides="upModalHide" :upItem="upItem" :upId="upId" :getData="getData"></UpdateModal>
        <ViewModal v-show="ViewShow" :lookItem="lookItem" @ViewShowModal="ViewShowModal"></ViewModal>
    </div>
</template>
<script>
import UpdateModal from './UpdateModal.vue'
import DelModal from './DelModal.vue'
import ViewModal from './ViewModal'
export default {
    components:{
        UpdateModal,
        DelModal,
        ViewModal
    },
    props:["list",'getData'],
    data(){
        return {
            upModalShow:false,
            upItem:'',
            upId:'',
            delId:'',
            delModalShow:false,
            lookItem:[],
            ViewShow:false
        }
    },
    methods:{
        // 修改按钮点击事件
        updataClick(id,index){
           this.upItem=this.list[index]
          this.upModalShow =true
          this.upId =id
        },
        // 修改模态框隐藏事件
        upModalHide(val){
            this.upModalShow = val
        },
        delClick(id){
            this.delId =id;
            this.delModalShow = true
        },
        delModalHide(val){
            this.delModalShow = val
        },
        lookClick(index){
            let obj=JSON.parse(JSON.stringify(this.list[index]))
          
            obj.hobbies = JSON.parse(obj.hobbies).join(' ')
            this.lookItem = obj
            console.log(this.lookItem)
            console.log([1,2,3,4])
            this.ViewShow= true
        },
        ViewShowModal(val){
            this.ViewShow = val
        }
    }
    
}
</script>
<style scoped>
.table-box{
    border-collapse: collapse;
    width: 100%;
}
.table-box tbody tr td{
    text-indent: 10px;
    height: 30px;
}
.table-box tbody tr:hover{
    background: lightcoral
}
.table-box thead tr th{
    height: 36px;
    background: lightblue
}
button{
    margin:4px;
}

</style>


